<template>
    <n-popover trigger="hover">
        <template #trigger>
            <n-button size="tiny" @click="showPopover = !showPopover">
                <n-icon><SettingsTwotone /></n-icon>
            </n-button>
        </template>
        <span>文件选项</span>
    </n-popover>
    <!-- --------------------------------------------- -->
    <div id="com_modal_fileSetting" class="quick-item-modal-card quick-item-modal-nomodal">
        <n-modal
            to="#com_modal_fileSetting"
            v-model:show="showPopover"
            title="文件设置"
            size="small"
            preset="card"
            draggable
            :trap-focus="false"
            :style="{ maxWidth: '500px' }">
            <div>
                <n-space vertical>
                    <div class="row">
                        <div class="item">允许文件下载</div>
                        <div class="control"><n-switch v-model:value="options.click_download" /></div>
                    </div>
                    <div class="row">
                        <div class="item">下载前确认</div>
                        <div class="control"><n-switch v-model:value="options.download_alert" /></div>
                    </div>
                </n-space>
                <n-space justify="space-between" style="margin-top: 2rem">
                    <div></div>
                    <div>
                        <n-space align="center">
                            <span v-if="edited" style="color: orange">*有修改*</span>
                            <n-button size="small" @click="handleCancel">取消</n-button>
                            <n-button size="small" type="primary" @click="handleConfirm">保存</n-button>
                        </n-space>
                    </div>
                </n-space>
            </div>
        </n-modal>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { SettingsTwotone } from '@vicons/material'

const showPopover = ref(false)
const options = ref({
    click_download: true,
    download_alert: true
})
const options_backup = ref({
    click_download: true,
    download_alert: true
})
const edited = computed(() => {
    return JSON.stringify(options.value) != JSON.stringify(options_backup.value)
})
function handleCancel() {
    options.value = JSON.parse(JSON.stringify(options_backup.value))
    showPopover.value = false
}
function handleConfirm() {
    options_backup.value = JSON.parse(JSON.stringify(options.value))
    emit('update:options', options.value)
    showPopover.value = false
}

defineExpose({ showPopover })
const emit = defineEmits(['update:options'])
</script>

<style lang="scss" scoped>
#com_modal_fileSetting {
    font-weight: 500;
    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0.25rem 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .item {
        flex-grow: 1;
        font-size: 0.875rem;
    }
}
</style>
